<template>
  <div class="exception-page">
    <van-nav-bar
        title="积分抽奖"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        class="custom-nav"
    />
  </div>
  <div class="lottery-container">
    <!-- 添加广告标语 -->
    <div class="slogan">
      欢迎广大充电用户来抽奖，每次抽奖需要花费50积分哦
    </div>
    <div>
      您当前还有{{ balance }} 积分
    </div>
    <nutbig-squarenine
        :prize-list="dataArr"
        :prize-id="prizeId"
        :cardImg="cardImg"
        @click="click"
    >
    </nutbig-squarenine>

    <!-- 添加中奖历史记录展示区域 -->
    <div class="history-container">
      <h3>中奖历史记录</h3>
      <div class="history-list">
        <div v-for="(item, index) in historyList" :key="index" class="history-item">
          <span>{{item.description}}</span>
          <span>{{item.name}}</span>
          <img :src="item.pictureUrl" width="100px" height="100px"  alt="">
          <el-button type="warning" @click="toExchange(item.giftNumber)" plain v-if="item.status==0">兑换</el-button>
          <el-button type="warning" @click="toExchange(item.giftNumber)" plain v-if="item.status==1">已兑换</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {GetGiftList, addUserGift, selectWinn,updateStatus} from "@/api/gift";
import { GetUserInfo } from "@/api/user"
import { ElMessage } from "element-plus";


// 使用ref创建响应式数据prizeId和cardImg
const prizeId = ref();
const cardImg = ref("//img11.360buyimg.com/imagetools/jfs/t1/73511/35/17197/9388/613852cdE75dc6822/ddb31e0f3cfdcb81.png");

const onClickLeft = () => {
  history.back()

}

// 使用reactive创建响应式数据dataArr
const dataArr = ref([])
function getGifts(){
  GetGiftList().then(res => {
    if (res.data.code == 200000){
      dataArr.value = res.data.data
    }
  })
}
getGifts()

// 定义点击事件处理函数click
const click = () => {
  const random = Math.floor(Math.random() * 9) + 1
  prizeId.value = random;
  toAddUserHistory(prizeId.value)
};



// 获取历史记录
const getHistory = async () => {
  try {
    const res = await GetLotteryHistory();
    if (res.data.code === 200000) {
      historyList.value = res.data.data;
    }
  } catch (error) {
    console.error('获取历史记录失败:', error);
  }
};

// 在组件挂载时获取历史记录
onMounted(() => {
  getHistory();
});
function toAddUserHistory(prizeId){

  addUserGift(prizeId).then(res=>{
    if (res.data.code == 200000){
      ElMessage.success(res.data.errorMessage
      )
      getHistory()
    }else{
      ElMessage.error(res.data.errorMessage
      )
    }
  })
}
// 添加历史记录相关数据
const historyList = ref([]);
function getWinn(){
  selectWinn().then(res=>{
    historyList.value=res.data.data
  })
}
getWinn()

function toExchange(giftNumber){
  updateStatus(giftNumber).then(res=>{
    if (res.data.code == 200000){
      ElMessage.success(res.data.errorMessage)
    }else{
      ElMessage.error(res.data.errorMessage
      )
    }
  })
}
const balance = ref(0)
function selectUserInfo(){
  GetUserInfo().then(res=>{
    if (res.data.code == 200000){
      balance.value = res.data.data.point
      if (res.data.data.balance < 50){
        ElMessage.error("您的积分不足，无法抽奖")

      }
    }
  })
}
selectUserInfo()
</script>

<style scoped>
.lottery-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.history-container {
  width: 100%;
  max-width: 500px;
  padding: 15px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.history-list {
  max-height: 300px;
  overflow-y: auto;
}

.history-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.history-item:last-child {
  border-bottom: none;
}

.slogan {
  font-size: 20px;
  color: #e4393c;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 500px;
}
</style>